<template>
  <div id="app">
    <div class="header">
      <div @click="home" class="home">首页</div>
      <div class="time">{{ time1 }}</div>
      <div @click="quit" class="quit">退出</div>
    </div>
    <div class="container">
      <div class="aside">
        <div class="student" @click="student">学生成员</div>
        <div class="grade" @click="grade">学生成绩</div>
        <div class="grade" @click="analyze">学生数据</div>
      </div>
      <div class="mian">
        <div ref="student">
          <table>
            <tr>
              <th>姓名</th>
              <th>学号</th>
              <th>家庭住址</th>
              <th>操作</th>
            </tr>
            <tr v-for="(item, index) in allDate" :key="index" class="hover">
              <td>{{ item.name }}</td>
              <td>{{ item.id }}</td>
              <td>{{ item.adress }}</td>
              <td @click="change(item.id)">
                <el-button type="text" @click="dialogFormVisible = true">编 辑</el-button>
                / <span @dblclick="delete1" class="delete">删 除</span> / <el-button type="text" @click="dialogFormVisible1 = true">添 加</el-button>
              </td>
            </tr>
          </table>
        </div>

        <div ref="grade">
          <grade></grade>
        </div>

        <div ref="analyze">
          <analyze></analyze>
        </div>
      </div>
    </div>
    <div class="footer clearfix">footer</div>

    <el-dialog title="修改学生成员" :visible.sync="dialogFormVisible" :center="true">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model.trim="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="住址" :label-width="formLabelWidth">
          <el-input v-model.trim="form.adress" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="comfirm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加学生" :visible.sync="dialogFormVisible1" :center="true">
      <el-form :model="form1" :rules="rules" ref="form1" :label-width="formLabelWidth" class="demo-ruleForm">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name1">
          <el-input v-model="form1.name1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学号" :label-width="formLabelWidth" prop="id1">
          <el-input v-model="form1.id1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="住址" :label-width="formLabelWidth" prop="adress1">
          <el-input v-model="form1.adress1" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add">添加</el-button>
        <el-button @click="rest">重置</el-button>
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import '@/assets/static/usuali.css'
import axios from '@/utlis/axios'
import grade from '@/components/grade'
import analyze from '@/components/analyze'
import fromat from '@/utlis/fromat'

export default {
  data() {
    return {
      allDate: [], //存储服务器返回的数据
      //修改学生
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '', //修改的姓名
        adress: '', //修改的地址
        id: '', //根据id来修改学生信息
      },
      formLabelWidth: '120px',
      //添加学生
      dialogTableVisible1: false,
      dialogFormVisible1: false,
      form1: {
        name1: '', //添加的姓名
        adress1: '', //添加的地址
        id1: '', //添加的id
      },
      //添加学生的规则
      rules: {
        name1: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
        ],
        id1: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { min: 11, max: 12, message: '长度在 11 到 12 个字符', trigger: 'blur' },
        ],
        adress1: [{ required: true, message: '请输入家庭住址', trigger: 'blur' }],
      },
      visible: false, //表示输入的是否为空
      timeID: null,
      time1: null,
      timeID2: null,
    }
  },
  methods: {
    async getDate() {
      //修改学生的数据
      const { data: res } = await axios.get('/student')
      if (/无效token/.test(res.message)) {
        localStorage.removeItem('token')
      }
      this.allDate = res.data
    },
    quit() {
      this.$router.push('/login')
    },
    home() {
      // this.$router.push('/admin')
    },
    change(id1) {
      this.form.id = id1
    },
    async comfirm() {
      this.dialogFormVisible = false
      if (this.form.name === '' || this.form.adress === '') {
        this.$message.error('修改失败，请重新修改')
      } else {
        await axios.post('/updatastudent', { username: this.form.name, adress: this.form.adress, id: this.form.id })
        this.$message({
          message: '恭喜你，修改成功',
          type: 'success',
        })
        this.getDate()
        this.form.name = this.form.adress = ''
        this.reload()
      }
    },
    async delete1() {
      if (this.allDate.length === 1) {
        return this.$message.error('删除失败')
      }
      const { data: res } = await axios.post('/deletestudent', { id: this.form.id })
      this.$message({
        message: res.message,
        type: 'success',
      })
      this.getDate()
      this.reload()
    },
    add() {
      this.dialogFormVisible1 = false
      this.$refs.form1.validate(async (valid) => {
        if (!valid) {
          this.dialogFormVisible1 = true
          alert('添加失败!')
        } else {
          const { data: res } = await axios.post('/addstudent', { username: this.form1.name1, id: this.form1.id1, adress: this.form1.adress1 })
          this.$message({
            message: res.message,
            type: 'success',
          })
          this.form1.name1 = this.form1.id1 = this.form1.adress1 = ''
          this.getDate()
          this.reload()
        }
      })
    },
    rest() {
      this.form1.name1 = this.form1.id1 = this.form1.adress1 = ''
      this.$message({
        message: '重置成功',
        type: 'success',
      })
    },
    time() {
      this.timeID = setInterval(() => {
        this.time1 = fromat()
      }, 1000)
    },
    student() {
      this.$refs.grade.classList.add('active')
      this.$refs.student.classList.remove('active')
      this.$refs.analyze.classList.add('active')
    },
    grade() {
      this.$refs.student.classList.add('active')
      this.$refs.grade.classList.remove('active')
      this.$refs.analyze.classList.add('active')
    },
    analyze() {
      this.$refs.analyze.classList.remove('active')
      this.$refs.grade.classList.add('active')
      this.$refs.student.classList.add('active')
    },
    //页面刷新
    reload() {
      this.timeID2 = setTimeout(() => {
        location.reload()
      }, 500)
    },
  },
  created() {
    this.getDate()
  },
  mounted() {
    this.student()
    this.time()
  },
  destroyed() {
    clearInterval(this.timeID)
    clearTimeout(this.timeID2)
  },
  components: {
    grade,
    analyze,
  },
}
</script>

<style lang="less" scoped>
#app {
  .header {
    display: flex;
    padding: 0 30px;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    background-color: rgba(46, 62, 237, 0.768);
    font-size: 1.5vw;
    line-height: 50px;
    cursor: pointer;

    .quit {
      cursor: pointer;
    }
  }

  .container {
    display: flex;
    align-items: stretch;
    height: 90vh;
    .aside {
      width: 12vw;
      // height: 90vh;
      background-color: pink;

      .student {
        cursor: pointer;
        margin-top: 10px;
        text-align: center;
        background-color: rgba(31, 220, 91, 0.658);
        height: 50px;
        line-height: 50px;
        font-size: 1vw;
      }

      .grade {
        cursor: pointer;
        margin-top: 10px;
        text-align: center;
        background-color: rgba(31, 220, 91, 0.658);
        height: 50px;
        line-height: 50px;
        font-size: 1vw;
      }
    }

    .mian {
      .active {
        display: none;
      }

      padding: 20px 30px;
      flex: 1;
      background-color: antiquewhite;

      table {
        width: 100%;
        border: 1px solid #ccc;
        border-collapse: collapse;

        th {
          border: 1px solid rgb(165, 14, 14);
        }

        tr,
        td {
          text-align: center;
          border: 1px solid rgb(122, 21, 195);
          height: 80px;

          .delete {
            cursor: pointer;
            color: #409eff;
            font-size: 14px;
            font-family: Arial;
          }
        }

        .hover {
          &:hover {
            background-color: #ccc;
          }

          .color {
            font-size: 20px;
            color: rgba(0, 255, 255, 0.605);
            cursor: pointer;
          }
        }
      }
    }
  }

  .footer {
    position: absolute;
    width: 100vw;
    height: 50px;
    bottom: 0px;
    background-color: rgba(161, 22, 236, 0.547);
    line-height: 50px;
    padding: 0 10px;
  }
}
</style>